<template>
  <div class="layout-components">
    <el-container>
      <el-aside :width="data.isCollapse ? '65px' : '235px'">
        <div style="flex-grow: 1; height: 0; width: 100%">
          <NavComponent :isCollapse="data.isCollapse" />
        </div>
        <div class="personal-explain">
          <img src="~@/assets/imgs/pink-logo.png" style="width: 100%" />
        </div>
      </el-aside>
      <div
        class="collapse-icon-div"
        :style="{ left: data.isCollapse ? '65px' : '235px' }"
      >
        <el-icon
          v-if="data.isCollapse"
          @click="data.isCollapse = !data.isCollapse"
          ><Expand
        /></el-icon>
        <el-icon v-else @click="data.isCollapse = !data.isCollapse"
          ><Fold
        /></el-icon>
      </div>
      <el-container>
        <el-header>
          <div class="el-header-top">
            <div class="layout-header-left">
              <el-breadcrumb separator="/">
                <template
                  v-for="route in currentRoute.matched"
                  :key="route.path"
                >
                  <el-breadcrumb-item v-if="route.meta?.i18n">{{
                    route.meta?.path === "redirect"
                      ? "..."
                      : $t(route.meta.i18n)
                  }}</el-breadcrumb-item>
                </template>
              </el-breadcrumb>
            </div>
            <div class="layout-header-right">
              <!-- 主题切换 -->
              <el-dropdown trigger="click">
                <i class="iconfont icon-pifuzhuti"></i>
                <template #dropdown>
                  <el-dropdown-menu>
                    <el-dropdown-item @click="switchTheme('standard')">{{
                      $t("message.common.themeBlue")
                    }}</el-dropdown-item>
                    <el-dropdown-item @click="switchTheme('green')">{{
                      $t("message.common.themeGreen")
                    }}</el-dropdown-item>
                    <el-dropdown-item @click="switchTheme('dark')">{{
                      $t("message.common.themeDark")
                    }}</el-dropdown-item>
                  </el-dropdown-menu>
                </template>
              </el-dropdown>
              <el-dropdown trigger="click">
                <i class="iconfont icon-yuyanfanyi"></i>
                <template #dropdown>
                  <el-dropdown-menu>
                    <el-dropdown-item @click="switchLang('zh_CN')"
                      >简体中文</el-dropdown-item
                    >
                    <el-dropdown-item @click="switchLang('en_US')"
                      >EN</el-dropdown-item
                    >
                  </el-dropdown-menu>
                </template>
              </el-dropdown>
              <div class="el-dropdown" @click="toGitee">
                <i class="iconfont icon-gitee"></i>
              </div>
              <el-dropdown trigger="click" popper-class="userOption">
                <i class="iconfont icon-touxiang"></i>
                <template #dropdown>
                  <div class="userInfo">
                    {{ user?.getUserInfo()?.nickName }}
                  </div>
                  <el-dropdown-menu>
                    <el-dropdown-item @click="logoutSystem">{{
                      $t("message.login.logout")
                    }}</el-dropdown-item>
                  </el-dropdown-menu>
                </template>
              </el-dropdown>
            </div>
          </div>
          <div class="el-header-bottom">
            <ViewTabs></ViewTabs>
          </div>
        </el-header>
        <el-main v-loading="app.getPageLoading()">
          <router-view v-slot="{ Component }">
            <transition name="fade" mode="out-in">
              <keep-alive>
                <component :is="Component" />
              </keep-alive>
            </transition>
          </router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>
<script setup>
import { reactive } from "vue";
import { useRouter } from "vue-router";
import { Expand, Fold } from "@element-plus/icons-vue";
import NavComponent from "./NavComponent.vue";
import { useUserStore } from "@/stores/userStore";
import { useAppStore } from "@/stores/appStore";
import { logout } from "@/utils/system/system";
import ViewTabs from "./ViewTabs.vue";
const { currentRoute } = useRouter();
const user = useUserStore();
const app = useAppStore();

const data = reactive({
  isCollapse: false,
});

// 点击切换语言
function switchLang(toggleLang) {
  user.setLanguage(toggleLang);
}

function logoutSystem() {
  logout();
}

// 跳转到gitee
function toGitee() {
  window.open("https://gitee.com/hudongdong6/vue3_personal", "blank");
}

function switchTheme(theme) {
  user.setTheme(theme);
  document.documentElement.setAttribute("data-theme", theme || "standard");
}
</script>
<style lang="scss" scoped>
.layout-components {
  width: 100%;
  height: 100%;
  .el-container {
    width: 100%;
    height: 100%;
    position: relative;
    .el-aside {
      display: flex;
      flex-direction: column;
      @include bg_color("bg_color");
      position: relative;
      transition: width 0.3s;
      overflow: hidden;
      .personal-explain {
        width: 100%;
      }
    }
    .collapse-icon-div {
      position: absolute;
      top: 12px;
      left: 235px;
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 3;
      cursor: pointer;
      transition: left 0.3s;
      font-size: 26px;
    }
    .el-header {
      height: 85px;
      padding: 0;
      z-index: 2;
      .el-header-top {
        height: 50px;
        padding-right: 20px;
        padding-left: 30px;
        display: flex;
        justify-content: space-between;
        @include second_bg_color("second_bg_color");
        .layout-header-left {
          display: flex;
          align-items: center;
          .el-breadcrumb {
            :deep(.el-breadcrumb__inner) {
              color: #000;
              font-weight: bold;
            }
            :deep(.el-breadcrumb__separator) {
              color: #000;
            }
          }
        }
        .layout-header-right {
          height: 100%;
          display: flex;
          align-items: center;
          i {
            font-size: 22px;
            cursor: pointer;
            color: #000000;
          }
          .el-dropdown + .el-dropdown {
            margin-left: 18px;
          }
        }
      }
      .el-header-bottom {
        height: 35px;
        box-shadow: 0px 5px 4px -4px rgba(0, 0, 0, 50%);
      }
    }
    .el-main {
      background: #f5f7f9;
      position: relative;
      overflow: hidden;
      padding: 0;
    }
  }
}
.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}
.fade-enter-to,
.fade-leave-from {
  opacity: 1;
}
.fade-enter-active,
.fade-leave-active {
  transition: 0.5s ease;
}
</style>

<style lang="scss">
.userOption {
  .userInfo {
    font-size: 14px;
    padding: 5px 16px;
  }
}
</style>
